<template>
	<div>
		<d-details ref="dDetailsRef" :message="message" v-if="current == 0"></d-details>
		<d-catalog ref="dCatalogRef" :message="message" v-else-if="current == 1"></d-catalog>
		<d-comments ref="dCommentsRef" :message="message" v-else-if="current == 2"></d-comments>
	</div>
</template>

<script>
import DDetails from "./details.vue"
import DCatalog from "./catalog.vue"
import DComments from "./comments.vue"
import mixins from "@/mixins"

export default {
	name: "details-tab",
	mixins: [mixins],
	props: {
		current: {
			type: Number,
			default: 0,
		},
		message: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {}
	},

	computed: {},
	methods: {
		onScrollBottom() {
			switch (this.current) {
				case 0:
					this.$refs.dDetailsRef.onScrollBottom && this.$refs.dDetailsRef.onScrollBottom()
					break
				case 1:
					this.$refs.dCatalogRef.onScrollBottom && this.$refs.dCatalogRef.onScrollBottom()
					break
				case 2:
					this.$refs.dCommentsRef.onScrollBottom && this.$refs.dCommentsRef.onScrollBottom()
					break
				default:
					break
			}
		},
	},
	components: {
		DDetails,
		DCatalog,
		DComments,
	},
}
</script>

<style lang="scss" scoped></style>
